<template>
  <div class="container">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/hotel' }">{{hotelData.big_cate}}</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/hotel' }">{{hotelData.area}}酒店</el-breadcrumb-item>
      <el-breadcrumb-item>{{hotelData.name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 标题 -->
    <div class="title">
      <h2>
        {{hotelData.name}}<span style="color:#f90"
          ><i class="iconfont iconhuangguan"></i
          ><i class="iconfont iconhuangguan"></i
          ><i class="iconfont iconhuangguan"></i
        ></span>
      </h2>
      <span>{{hotelData.alias}}</span><br />
      <span class="el-icon-location">{{hotelData.address}}</span>
    </div>
    <!-- 详情图 -->
    <div class="main">
      <el-row type="flex" class="row-bg">
        <el-col :span="16"
          ><div class="grid-content bg-purple">
            <img
              src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
              class="left-img"
            /></div
        ></el-col>
        <el-col :span="8"
          ><div class="grid-content bg-purple-light">
            <el-col :span="12"
              ><div class="grid-content bg-purple item">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple item">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple item item-middle">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple item item-middle">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple item">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-col :span="12"
              ><div class="grid-content bg-purple item">
                <img
                  class="item-img"
                  src="http://157.122.54.189:9093/images/hotel-pics/1.jpeg"
                  alt=""
                /></div
            ></el-col>
            <el-row type="flex" class="row-bg" justify="space-between">
            </el-row></div
        ></el-col>
      </el-row>
    </div>

    <!-- 来源、价格 -->
    <el-table :data="tableData" style="width: 100%">

      <el-table-column prop="name" label="价格来源" style="width: 33.3%">
      
      </el-table-column>

      <el-table-column
        prop="bestType"
        align="center"
        label="低价房型"
        style="width: 33.3%"
      >
    
      </el-table-column>
      
      <el-table-column
        align="center"
        prop="price"
        label="最低价格/每晚"
        style="width: 33.3%"
      >
      
       <template slot-scope="priceColor">
        <span class="orange">￥{{priceColor.row.price}}&nbsp;</span> 起 
        <i class="orange el-icon-arrow-right"></i>
      </template>

      </el-table-column>
    </el-table>
    <!-- 位置地图 -->
    <Map/>
    <!-- 基本信息 -->
    <div class="infos">
      <el-row class="info-item">
        <el-col :span="4" class="title"
          ><div class="grid-content bg-purple">基本信息</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            <el-row :gutter="20" class="info-lis">
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  入住时间: 14:00之后
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  离店时间: 12:00之前
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  {{hotelData.creation_time}} / {{hotelData.renovat_time}}
                </div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple">
                  酒店规模:{{hotelData.roomCount}}间客房
                </div></el-col
              >
            </el-row>
          </div></el-col
        >
      </el-row>
      <el-row class="info-item">
        <el-col :span="4" class="title"
          ><div class="grid-content bg-purple">主要设施</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            <el-row :gutter="20" class="info-lis">
              <el-col :span="6"
                ><div class="grid-content bg-purple">热水壶</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
            </el-row></div
        ></el-col>
      </el-row>
      <el-row class="info-item">
        <el-col :span="4" class="title"
          ><div class="grid-content bg-purple">停车服务</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            <el-row :gutter="20" class="info-lis">
              <el-col :span="6"
                ><div class="grid-content bg-purple">-</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
            </el-row></div
        ></el-col>
      </el-row>
      <el-row class="info-item">
        <el-col :span="4" class="title"
          ><div class="grid-content bg-purple">品牌信息</div></el-col
        >
        <el-col :span="20"
          ><div class="grid-content bg-purple-light">
            <el-row :gutter="20" class="info-lis">
              <el-col :span="6"
                ><div class="grid-content bg-purple">{{hotelData.real_city}}</div></el-col
              >
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
              <el-col :span="6"
                ><div class="grid-content bg-purple"></div
              ></el-col>
            </el-row></div
        ></el-col>
      </el-row>
    </div>
    <!-- 用户评论 -->
    <el-row class="review">
      <el-col :span="24" class="total"
        ><div><h4>{{hotelData.all_remarks}}条真实用户评论</h4></div></el-col
      >
      <el-col :span="24" class="pingfen"
        ><div>
          <el-row :gutter="20">
            <el-col :span="4"
              ><div>
                <p>总评数：{{hotelData.all_remarks}}</p>
                <p>好评数：{{hotelData.good_remarks}}</p>
                <p>差评数：{{hotelData.bad_remarks}}</p>
              </div></el-col
            >
            <el-col :span="5"
              ><div>
                <div class="quanquan">
                  <el-progress
                    type="circle"
                    :show-text="false"
                    :percentage="100"
                    :width="70"
                    :stroke-width="2"
                    color="orange"
                  >
                  </el-progress>
                  <div class="star">
                    <el-rate
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}"
                    >
                    </el-rate>
                  </div>
                  <div class="tuijian">
                    推荐
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="3"
              ><div>
                <div class="quanquan">
                  <el-progress
                    type="circle"
                    :show-text="false"
                    :percentage="70"
                    :width="70"
                    :stroke-width="2"
                    color="orange"
                  >
                  </el-progress>
                  <span class="text">
                    <span>环境</span>
                    <span>{{hotelData.scores&&hotelData.scores.environment}}</span>
                  </span>
                </div>
              </div></el-col
            >
            <el-col :span="3"
              ><div>
                <div class="quanquan">
                  <el-progress
                    type="circle"
                    :show-text="false"
                    :percentage="70"
                    :width="70"
                    :stroke-width="2"
                    color="orange"
                  >
                  </el-progress>
                  <span class="text">
                    <span>产品</span>
                    <span>{{hotelData.scores&&hotelData.scores.product}}</span>
                  </span>
                </div>
              </div></el-col
            >
            <el-col :span="3">
              <div class="quanquan">
                <el-progress
                  type="circle"
                  :show-text="false"
                  :percentage="70"
                  :width="70"
                  :stroke-width="2"
                  color="orange"
                >
                </el-progress>
                <span class="text">
                  <span>服务</span>
                  <span>{{hotelData.scores&&hotelData.scores.service}}</span>
                </span>
              </div>
            </el-col>
          </el-row>
        </div></el-col
      >
    </el-row>
    </div>
</template>

<script>
import Map from '../testMap.vue'
export default {
  components:{
    Map
  }
,
  data() {
    return {
      tabPosition: "top",
      tableData: [
      ],
      mapData: [
        {
          date: "广州塔",
          name: "10km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "海心沙",
          name: "8km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "珠江新城",
          name: "9km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "广州塔",
          name: "10km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "海心沙",
          name: "8km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "珠江新城",
          name: "9km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "广州塔",
          name: "10km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "海心沙",
          name: "8km",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "珠江新城",
          name: "9km",
          address: "上海市普陀区金沙江路 1518 弄"
        }
        
      ],
      //星星
      value: 3.7,
      hotelData:{},
      circleData:[],
      scores:{}
    }
  },
  created(){
    const id =this.$route.query.id
    this.$axios({
      url:"/hotels",
     params:{id}

    }).then(res=>{
      console.log(res.data);
      //定义一个对象，接受拿到的数据
      this.hotelData=res.data.data[0]
      //评分等级
      this.value=this.hotelData.stars?this.hotelData.stars:[]
      // 酒店详情
      this.tableData = this.hotelData.products?this.hotelData.products:[]
      //评分圆环
      this.scores = this.hotelData.scores? this.hotelData.scores:[]
      console.log(this.scores);
      this.circleData.push(this.scores.environment*10,
      this.scores.product*10,this.scores.scores*10
      )
    })
  },
 
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 0 auto;
  margin-top: 20px;
}
.main {
  margin-top: 50px;
}
.title h2 {
  margin-top: 20px;
  font-weight: normal;
}
.title span {
  color: #666666;
}

.row-bg {
  height: 360px;
  //   background-color: pink;
  justify-content: space-between;
}
.left-img {
  width: 640px;
  height: 360px;
}
.item {
  height: 110px;
  margin-right: 13px;
}
.item-middle {
  margin-top: 15px;
  margin-bottom: 15px;
}
.item-img {
  width: 100%;
}
.map {
  display: flex;
  justify-content: space-between;
}
.rr {
  width: 330px;
  height: 360px;
}

//  去掉表格边框
// 去掉表格单元格边框
/deep/.el-table__row td {
  border: 0;
}

//infos信息
.infos {
  margin-top: 30px;
}
.info-item {
  height: 60px;
  display: flex;
  align-items: center;
  /deep/.title {
    font-size: 14px;
  }
  /deep/.info-lis {
    font-size: 14px;
    color: #666666;
  }
}
// 评论
.review {
  height: 150px;
  // background-color: skyblue;

  .total {
    margin-top: 30px;
  }
  .pingfen {
    padding: 20px 0;
    p {
      color: #666666;
    }
  }
}
.quanquan {
  position: relative;
}
.text {
  display: flex;
  flex-direction: column;
  // align-items: center;
  color: orange;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-106%, -50%);
}
.star {
  position: absolute;
  left: -23px;
  top: 20px;
}
.tuijian {
  color: orange;
  position: absolute;
  top: -2px;
  left: 9px;
  font-size: 26px;
  text-align: center;
  transform: translate(-106%, -50%);
  text-align: center;
  height: 70px;
  line-height: 70px;
  opacity: 0.25;
  transform: rotate(-30deg);
}
.orange{
  color: orange;
  font-size: 17px;
}
</style>
